<template>
    <div class="main-border">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">普通用户注册</el-menu-item>
            <el-menu-item index="2">商家注册</el-menu-item>
        </el-menu>
        
        <el-table v-show="this.mode == 1"
                  :data="userRegisterData"
                  stripe
                  style="width: 100%;color: #5a5c61;">
            <el-table-column label="头像" width="50">
                <template slot-scope="scope">
                    <el-avatar shape="square" :size="23" :src="$store.state.baseApi + scope.row.avatar"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column
                    prop="accountNumber"
                    label="用户账号"
                    show-overflow-tooltip
                    min-width="150"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="nickname"
                    label="用户昵称"
                    show-overflow-tooltip
                    min-width="150"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="registerTime"
                    label="注册时间"
                    show-overflow-tooltip
                    width="200">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="success"
                            @click="approveUser(scope.$index)"> 通过</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="rejectUser(scope.$index)"> 驳回</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <el-table v-show="this.mode == 2"
                  :data="vendorRegisterData"
                  stripe
                  style="width: 100%;color: #5a5c61;">
            <el-table-column
                    prop="accountNumber"
                    label="商家账号"
                    show-overflow-tooltip
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="vendorName"
                    label="商家名称"
                    >
            </el-table-column>
            <el-table-column
                    prop="registerTime"
                    label="注册时间"
                    show-overflow-tooltip
                    width="200">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="success"
                            @click="approveVendor(scope.$index)"> 通过</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="rejectVendor(scope.$index)"> 驳回</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <div class="block">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="nowPage"
                    :page-size="7"
                    background
                    layout="prev, pager, next,jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "userVendorRegisterList",
        created() {
            this.getUserRegisterData();
        },
        methods: {
            handleCurrentChange(val) {
                this.nowPage = val;
                if(this.mode == 1){
                    this.getUserRegisterData();
                }
                if(this.mode == 2){
                    this.getVendorRegisterData();
                }
            },
            handleSelect(val){
                if(this.mode !== val){
                    this.mode = val;
                    this.nowPage = 1;
                    if(val == 1){
                        this.getUserRegisterData();
                    }
                    if(val == 2){
                        this.getVendorRegisterData();
                    }
                }
            },
            getUserRegisterData(){
                // 获取普通用户注册数据
                this.$api.getUserRegisterData({
                    page: this.nowPage,
                    nums:8,
                }).then(res => {
                    if(res.status_code == 1){
                        this.userRegisterData = res.data.list;
                        this.total = res.data.count;
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            // getVendorRegisterData(){
            //     // 获取商家注册数据
            //     this.$api.getVendorRegisterData({
            //         page: this.nowPage,
            //         nums:8,
            //     }).then(res => {
            //         if(res.status_code == 1){
            //             this.vendorRegisterData = res.data.list;
            //             this.total = res.data.count;
            //         }else {
            //             this.$message.error(res.msg)
            //         }
            //     }).catch(e => {
            //         console.log(e);
            //     });
            // },
            approveUser(i){
                // 通过普通用户注册
                this.$api.updateUserAllow({
                    id: this.userRegisterData[i].id,
                    allow: 1
                }).then(res => {
                    if(res.status_code == 1){
                        this.getUserRegisterData();
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            rejectUser(i){
                // 驳回普通用户注册
                this.$api.updateUserAllow({
                    id: this.userRegisterData[i].id,
                    allow: -1
                }).then(res => {
                    if(res.status_code == 1){
                        this.getUserRegisterData();
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            // approveVendor(i){
            //     // 通过商家注册
            //     this.$api.updateVendorRegisterStatus({
            //         id: this.vendorRegisterData[i].id,
            //         status: 1
            //     }).then(res => {
            //         if(res.status_code == 1){
            //             this.getVendorRegisterData();
            //         }else {
            //             this.$message.error(res.msg)
            //         }
            //     }).catch(e => {
            //         console.log(e);
            //     });
            // },
            // rejectVendor(i){
            //     // 驳回商家注册
            //     this.$api.updateVendorRegisterStatus({
            //         id: this.vendorRegisterData[i].id,
            //         status: -1
            //     }).then(res => {
            //         if(res.status_code == 1){
            //             this.getVendorRegisterData();
            //         }else {
            //             this.$message.error(res.msg)
            //         }
            //     }).catch(e => {
            //         console.log(e);
            //     });
            // }
        },
        data(){
            return {
                mode: 1,
                nowPage: 1,
                total: 63,
                userRegisterData: [],
                vendorRegisterData: [],
            }
        },
    }
</script>

<style scoped>
    .main-border{
        background-color: #FFF;
        padding: 10px 30px;
        box-shadow: 0 1px 15px -6px rgba(0,0,0,.5);
        border-radius: 5px;
    }
    .block {
        display: flex;
        justify-content:center;
        padding-top: 15px;
        padding-bottom: 10px;
        width: 100%;
    }
</style>
